<template>
  <div class="app-container">
    <div class="box">
      <div class="line"></div>
      <div class="boxzi">本周计划</div>
    </div>
    <el-row>
      <el-col :span="2">本周计划：</el-col>
      <el-col :span="16">
        <el-upload ref="upload1" :limit="1" accept=".xlsx, .xls, .doc, .docx, .txt" :headers="upload1.headers"
          :action="upload1.url" :disabled="upload1.isUploading" :on-progress="handleFileUploadProgress1"  :file-list="fileList"
          :on-success="handleFileSuccess1" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许上传文档或者图片文件！</div>
        </el-upload>
      </el-col>

    </el-row>

    <div class="box">
      <div class="line"></div>
      <div class="boxzi">计划详情</div>
    </div>
    <div style="display: flex; justify-content:space-between;width: 230px;">
      <el-button type="info" icon="el-icon-download" @click="downloadFile">下载模板</el-button>
      <el-upload :show-file-list="false" ref="upload" accept=".doc, .docx, .xls,.xlsx" :headers="upload.headers"
        :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
        :data="{ weekId: $route.query.weekId }" :on-success="onSuccess">
        <el-button type="primary" icon="el-icon-upload2">导入</el-button>
      </el-upload>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="6">
        <div class="oneday theday">
          <div>
            <!-- <img src="@/assets/image/foot.png"> -->
            <p>学期：{{ dataListLeft.semsterName }}</p>
            <p>班级：{{ dataListLeft.className }}</p>
            <p>周次：{{ dataListLeft.weekNumber }}</p>
            <p>教育重点：{{ dataListLeft.educationFocus }}</p>
            <p>保育重点：{{ dataListLeft.conservationFocus }}</p>
            <p>家长工作：{{ dataListLeft.parentWork }}</p>
            <p>开始时间：{{ dataListLeft.startTime }}</p>
            <p>结束时间：{{ dataListLeft.endTime }}</p>
          </div>
          <!-- <el-button type="primary" icon="el-icon-edit" circle class="editstyle" @click="handleUpdateWeek(dataListLeft)"></el-button> -->
        </div>
      </el-col>
      <el-col :span="6" v-for="(item, index) in dataList" :key="index" class="contentlist">
        <div :class="'oneday theday' + index" v-for="(key, val) in item" :key="val">
          <div class="topinfor">
            <p class="weekword">
              {{ week[index]
              }}<span data-v-7b513308="" :class="'yuanback yuanback' + index"></span>
            </p>
            <p>{{ transform(val) }}</p>
          </div>
          <div class="bottominfor">
            <div class="morning">
              <p style="text-align: center">上午</p>
              <div class="threeMeal" v-for="(info, i) in item[val].morning" :key="i">
                <div class="Breakfast">
                  <div><img src="@/assets/image/morningIcon.png" alt="" /></div>
                  <div>
                    <span style="font-weight: 700">{{
                      info.activityType
                      }}</span>
                    <p v-if="info.startTime">
                      时间：{{ dealDate(info.startTime) }}-{{
                        dealDate(info.endTime)
                      }}
                    </p>
                    <p>{{ info.activityName }}</p>
                    <p>{{ info.activityTarget }}</p>
                  </div>
                </div>
                <div class="Breafastimg" v-if="info.filePath">
                  <el-image :key="item" v-for="(item, index) in info.filePath.split(',')" :src="item"
                    style="width: 40px; height: 40px" :preview-src-list="[item]"></el-image>
                </div>
              </div>
            </div>
            <div class="afternoon">
              <p style="text-align: center">下午</p>
              <div class="threeMeal" v-for="(info, i) in item[val].afternoon" :key="i">
                <div class="Breakfast">
                  <div>
                    <img src="@/assets/image/afternoonIcon.png" alt="" />
                  </div>
                  <div>
                    <span style="font-weight: 700">{{
                      info.activityType
                      }}</span>
                    <p v-if="info.startTime">
                      时间:{{ dealDate(info.startTime) }}-{{
                        dealDate(info.endTime)
                      }}
                    </p>
                    <p>{{ info.activityName }}</p>
                    <p>{{ info.activityTarget }}</p>
                  </div>
                </div>
                <div class="Breafastimg" v-if="info.filePath">
                  <el-image :key="item" v-for="(item, index) in info.filePath.split(',')" :src="item"
                    style="width: 40px; height: 40px" :preview-src-list="[item]"></el-image>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" icon="el-icon-edit" circle class="editstyle"
            @click="handleUpdate(item, val)"></el-button>
        </div>
      </el-col>
    </el-row>
    <div class="box">
      <div class="line"></div>
      <div class="boxzi">计划审核</div>
    </div>
    <el-row>
      <el-col :span="2">计划审核：</el-col>
      <el-col :span="16">
        <el-select v-model="classId" placeholder="请选择" clearable size="small">
          <el-option v-for="item in classLists" :key="item.id" :label="item.name" :value="item.id" size="small">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row v-if="examineStatus!=0 && userId==classId">
      <el-col :span="2">审核意见：</el-col>
      <el-col :span="16" style="margin-top: 20px;">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="examineContent">
        </el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
      <el-button type="primary" @click="submit" v-if="status==0">提交</el-button>
      <el-button type="info" @click="pass(1)" v-if="examineStatus!=0 && userId==classId">审核通过</el-button>
      <el-button type="info" @click="reject(-1)" v-if="examineStatus!=0 && userId==classId">审核驳回</el-button>
    </div>
    <!-- 添加或修改周计划对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form v-if="isEdit == 1" ref="form" :model="form" label-width="110px">
        <el-tabs type="card" v-model="activename">
          <el-tab-pane label="上午" name="first">
            <div v-for="(item, index) in form.morningForm" :key="index">
              <div style="display: flex">
                <div style="flex: 1">
                  <el-form-item label="活动开始时间" prop="sTime">
                    <el-time-select placeholder="开始时间" v-model="item.sTime" :picker-options="{
                      start: '07:30',
                      step: '00:10',
                      end: '12:00',
                    }">
                    </el-time-select>
                  </el-form-item>
                  <el-form-item label="活动结束时间" prop="eTime">
                    <el-time-select placeholder="结束时间" v-model="item.eTime" :picker-options="{
                      start: '07:30',
                      step: '00:10',
                      end: '12:00',
                    }">
                    </el-time-select>
                  </el-form-item>
                  <el-form-item label="活动类型" disabled prop="activityType">
                    <el-input v-model="item.activityType" placeholder="请输入活动类型"></el-input>
                  </el-form-item>
                  <el-form-item label="活动名字" prop="activityName">
                    <el-input v-model="item.activityName" placeholder="请输入活动名称"></el-input>
                  </el-form-item>

                  <el-form-item label="课程目标" prop="activityTarget">
                    <el-input v-model="item.activityTarget" placeholder="请输入课程目标"></el-input>
                  </el-form-item>
                </div>
                <i class="el-icon-circle-close" style="width: 40px; cursor: pointer" @click="handleDel(index, '1')"></i>
              </div>
            </div>
            <div v-if="isMorningShowAdd">
              <el-button type="primary" @click="addWorklyPlan(1)">新增</el-button>
              <!-- <el-button type="primary" @click="delWorklyPlan(1)">删除</el-button> -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="下午" name="second">
            <div v-for="(item, index) in form.afternoonForm" :key="index">
              <div style="display: flex">
                <div style="flex: 1">
                  <el-form-item label="活动开始时间" prop="sTime">
                    <el-time-select placeholder="开始时间" v-model="item.sTime" :picker-options="{
                      start: '13:00',
                      step: '00:10',
                      end: '18:30',
                    }">
                    </el-time-select>
                  </el-form-item>
                  <el-form-item label="活动结束时间" prop="eTime">
                    <el-time-select placeholder="结束时间" v-model="item.eTime" :picker-options="{
                      start: '13:00',
                      step: '00:10',
                      end: '18:30',
                    }">
                    </el-time-select>
                  </el-form-item>
                  <el-form-item label="活动类型" prop="activityType">
                    <el-input v-model="item.activityType" placeholder="请输入活动类型"></el-input>
                  </el-form-item>
                  <el-form-item label="活动名字" prop="activityName">
                    <el-input v-model="item.activityName" placeholder="请输入活动名称"></el-input>
                  </el-form-item>
                  <el-form-item label="课程目标" prop="activityTarget">
                    <el-input v-model="item.activityTarget" placeholder="请输入课程目标"></el-input>
                  </el-form-item>
                </div>
                <i class="el-icon-circle-close" style="width: 40px; cursor: pointer" @click="handleDel(index, '2')"></i>
              </div>
            </div>
            <div v-if="isAfternoonShowAdd">
              <el-button type="primary" @click="addWorklyPlan(2)">新增</el-button>
              <!-- <el-button type="primary" @click="delWorklyPlan(2)">删除</el-button> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <el-form v-else ref="formWeek" :model="formWeek" :rules="rules" label-width="110px">
        <el-form-item label="学期" prop="semsterId">
          <el-select v-model="formWeek.semsterId" filterable clearable placeholder="请选择学期">
            <el-option v-for="item in semsterList" :key="item.id" :label="item.title" :value="item.id" size="small">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
          <el-select v-model="formWeek.classId" clearable filterable placeholder="请选择班级">
            <el-option v-for="item in classList" :key="item.id" :label="item.title" :value="item.id" size="small">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="周次" prop="weekNumber">
          <el-input v-model="formWeek.weekNumber" placeholder="请输入周次" />
        </el-form-item>
        <el-form-item label="教育重点" prop="educationFocus">
          <el-input v-model="formWeek.educationFocus" placeholder="请输入教育重点" />
        </el-form-item>
        <el-form-item label="保育工作" prop="conservationFocus">
          <el-input v-model="formWeek.conservationFocus" placeholder="请输入保育工作" />
        </el-form-item>
        <el-form-item label="家长工作" prop="parentWork">
          <el-input v-model="formWeek.parentWork" placeholder="请输入家长工作" />
        </el-form-item>
        <el-form-item label="活动时间" prop="time">
          <el-date-picker v-model="formWeek.time" type="datetimerange" range-separator="至" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openMessageBox">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWeekDetail,
  editEveryDayPlan,
  editWorklyPlan,
  delWorkPlan,
  exportFile,
  getTeacher,
  weekSubmit,
  weekPass
} from "@/api/teach/weeklyplan";
import { selectClazz } from "@/api/base/clazz";
import { selectSemster } from "@/api/base/semster";
import { parseTime } from "@/utils/ruoyi";
import { getToken } from "@/utils/auth";

export default {
  name: "gzt",
  data() {
    return {
      week: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ],
      dataList: [],
      classLists: [],
      date: new Date(),
      // 表单参数
      form: {
        morningForm: [],
        afternoonForm: [],
      },
      // 表单校验
      rules: {
        semsterId: [
          { required: true, message: "学期不能为空", trigger: "blur" },
        ],
        classId: [{ required: true, message: "班级不能为空", trigger: "blur" }],
        weekNumber: [
          { required: true, message: "周次不能为空", trigger: "blur" },
        ],
        educationFocus: [
          { required: true, message: "教育重点不能为空", trigger: "blur" },
        ],
        conservationFocus: [
          { required: true, message: "保育工作不能为空", trigger: "blur" },
        ],
        parentWork: [
          { required: true, message: "家长工作不能为空", trigger: "blur" },
        ],
        educationFocus: [
          { required: true, message: "教育重点不能为空", trigger: "blur" },
        ],
        time: [
          { required: true, message: "活动时间不能为空", trigger: "blur" },
        ],
      },
      // 导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/study/workplan/importData",
      },
      upload1: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
      formWeek: {},
      title: "修改周计划",
      open: false,
      foodoptions: [],
      dataListLeft: {},
      activename: "first", //默认第一个
      isMorningShowAdd: false,
      isAfternoonShowAdd: false,
      isEdit: 1, //修改某一天1,2修改周
      // 学期数据
      semsterList: [],
      // 班级数据
      classList: [],
      currentDay: "",
      inType: "",
      classId: '',
      examineContent: '',
      examineStatus:'',
      userId:'',
      fileList:[],
      status:-1
    };
  },
  created() {
    this.getList(this.$route.query);
    this.getClazz();
    this.getSemster();
    this.getTeacher()
    this.examineStatus = this.$route.query.examineStatus
    this.userId=localStorage.getItem('userInfo').userId
    this.fileList.push({name:this.$route.query.weekPlanFileName,url:this.$route.query.weekPlanFileUrl})
    this.status=this.$route.query.status

  },
  methods: {
    getTeacher() {
      getTeacher().then(res => {
        this.classLists = res.data
        this.classId =Number(this.$route.query.examineUserId) 
      })
    },
    pass(num){
      console.log(num)
      var data={
        examineStatus:num,
        examineContent:this.examineContent,
        id:this.$route.query.weekId
      }
      weekPass(data).then(res=>{
        this.$message.success('已审核')
      })
    },
    submit() {
      var data={
        weekPlanFileUrl:this.file.url,
        weekPlanFileName:this.file.fileName,
        examineUserId:this.classId,
        id:this.$route.query.weekId
      }
      weekSubmit(data).then(res=>{
        console.log(res)
        this.$refs.upload1.clearFiles();
        this.$message.success('提交成功')
      })     
    },
    // 文件上传中处理
    handleFileUploadProgress1(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess1(response, file, fileList) {
      console.log(response)
      this.file=response
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    onSuccess(response) {
      if (response.code === 200) {
        let halfLength = Math.floor(response.msg.length / 5); // 获取字符串长度的一半（向下取整）
        let result = response.msg.substring(halfLength);
        this.$message.success(result);
        this.getList(this.$route.query);
      } else {
        this.$message.error(response.msg);
      }
    },
    // 下载模板
    async downloadFile() {
      const obj = {
        weekId: this.$route.query.weekId,
      };
      const { data, code, msg } = await exportFile(obj);
      if (code === 200) {
        this.download(msg);
        this.$message.success("操作成功");
      } else {
        this.$message.error(msg);
      }
    },
    handleDel(index, i) {
      // i==1 上午，1==2下午
      if (i == "1") {
        this.form.morningForm.splice(index, 1);
      } else if (i == "2") {
        this.form.afternoonForm.splice(index, 1);
      }
    },
    /**班级*/
    async getClazz() {
      try {
        const { rows } = await selectClazz();
        this.classList = rows;
      } catch (e) {
        console.log(e);
      }
    },
    /**学期*/
    async getSemster() {
      try {
        const { rows } = await selectSemster();
        this.semsterList = rows;
      } catch (e) {
        console.log(e);
      }
    },
    getFormclassList() { },
    /**handleChange*/
    handleChange(value) {
      console.log(value);
    },
    /**数据处理*/
    transform(val) {
      let date = val.split(" "),
        year = date[0];
      year = year.substring(year.indexOf("-") + 1, year.lenght);
      return year;
    },
    dealDate(val) {
      var timeOnly = val.split(" ")[1]; // 提取时间部分
      var hoursMinutes = timeOnly.split(":"); // 按照冒号分割时间字符串

      var hours = hoursMinutes[0]; // 提取小时部分
      var minutes = hoursMinutes[1]; // 提取分钟部分
      return `${hours}:${minutes}`;
    },

    async getList(row) {
      console.log("yom1", this.$route.query);
      try {
        this.loading = true;
        let params = {
          // classId:row.classId,
          // weekNumber:row.weekNumber,
          // semsterId:row.semsterId
          id: row.weekId,
        };
        const data = await getWeekDetail(params);
        this.dataList = Object.entries(data.data.right).map(([key, value]) => ({
          [key]: value,
        }));
        this.dataListLeft = data.data.left;
        // this.total = data.total;
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    /**刷新*/
    handlerefresh() {
      this.data = parseTime(new Date(), "{y}-{m}-{d}");
      this.getList();
    },
    // 正常时间转成中国标准时间
    delTimes(time) {
      const dateObj = new Date(time);
      // 将Date对象的时区设置为中国标准时间 (UTC+8)
      dateObj.setTime(
        dateObj.getTime() + dateObj.getTimezoneOffset() * 60000 + 8 * 3600000
      );
      return dateObj;
    },
    // 中国标准时间转成年-月-日 时:分:秒
    delNormalTime(cst, flag) {
      // 将CST转换为正常时间格式
      var date = new Date(cst);
      // 将小时数加上8
      if (!flag) {
        date.setHours(date.getHours() + 8);
      }

      // 获取加上8小时后的时间字符串
      var normalTime = date.toISOString().replace(/T/, " ").replace(/\..+/, "");
      return normalTime;
    },
    // 只取时分
    getHoursM(time) {
      // 提取时间中的小时和分钟部分
      var hourMinute = time.split(" ")[1].substring(0, 5);
      return hourMinute;
    },
    /**编辑**/
    handleUpdate(row, val) {
      this.currentDay = val;
      this.title = "编辑";
      this.isEdit = 1;
      this.activename = "first";
      this.form.morningForm = JSON.parse(JSON.stringify(row[val].morning));
      this.form.afternoonForm = JSON.parse(JSON.stringify(row[val].afternoon));
      this.isMorningShowAdd = true;
      this.isAfternoonShowAdd = true;
      if (!this.form.morningForm.length) {
        // this.isMorningShowAdd = true
        // this.form.morningForm.push(
        //   {
        //     activityName:'',
        //     activityType:'',
        //     classId:Number(this.$route.query.classId),
        //     endTime:'',
        //     startTime:'',
        //     time:'',
        //     weekId:Number(this.$route.query.weekId)
        //   })
      } else {
        // this.isMorningShowAdd = false
        this.form.morningForm?.forEach((item) => {
          // item.sTime = this.getHoursM(item.startTime)
          // item.eTime = this.getHoursM(item.endTime)
          this.$set(item, "sTime", this.getHoursM(item.startTime));
          this.$set(item, "eTime", this.getHoursM(item.endTime));
        });
      }
      if (!this.form.afternoonForm.length) {
        // this.isAfternoonShowAdd = true
        // this.form.afternoonForm.push(
        //   {
        //     activityName:'',
        //     activityType:'',
        //     classId:Number(this.$route.query.classId),
        //     endTime:'',
        //     startTime:'',
        //     time:'',
        //     weekId:Number(this.$route.query.weekId)
        //   }
        // )
      } else {
        // this.isAfternoonShowAdd = false
        this.form.afternoonForm?.forEach((item) => {
          // item.sTime = this.getHoursM(item.startTime)
          // item.eTime = this.getHoursM(item.endTime)
          this.$set(item, "sTime", this.getHoursM(item.startTime));
          this.$set(item, "eTime", this.getHoursM(item.endTime));
        });
      }
      this.form.date = val;
      this.open = true;
    },
    handleUpdateWeek(row) {
      console.log(row);
      this.isEdit = 2;
      this.title = "修改周计划";
      this.formWeek = row;
      this.$set(this.formWeek, "time", [row.startTime, row.endTime]);
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    addWorklyPlan(val) {
      if (val == 1) {
        this.form.morningForm.push({
          activityName: "",
          activityType: "",
          classId: Number(this.$route.query.classId),
          endTime: "",
          startTime: "",
          sTime: "",
          eTime: "",
          weekId: Number(this.$route.query.weekId),
        });
      } else {
        this.form.afternoonForm.push({
          activityName: "",
          activityType: "",
          classId: Number(this.$route.query.classId),
          endTime: "",
          startTime: "",
          sTime: "",
          eTime: "",
          weekId: Number(this.$route.query.weekId),
        });
      }
    },
    delWorklyPlan(val) {
      if (val == 1 && this.form.morningForm.length !== 1) {
        this.form.morningForm.pop();
      }
      if (val == 2 && this.form.afternoonForm.length !== 1) {
        this.form.afternoonForm.pop();
      }
    },

    openMessageBox() {
      this.$confirm("是否同步该班级所在年级其他班级的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.inType = 1;
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          this.submitForm();
        })
        .catch(() => {
          this.inType = 0;
          this.submitForm();
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    submitForm() {
      if (this.isEdit == 1) {
        // console.log("周计划1",this.dataListLeft)
        let arr = [];
        this.form.morningForm.forEach((item) => {
          item.startTime = this.currentDay + " " + item.sTime + ":00";
          item.endTime = this.currentDay + " " + item.eTime + ":00";
          item.semsterId = this.dataListLeft.semsterId;
          item.weekNumber = this.dataListLeft.weekNumber;
          item.inType = this.inType;
          arr.push(item);
        });
        this.form.afternoonForm.forEach((item) => {
          item.startTime = this.currentDay + " " + item.sTime + ":00";
          item.endTime = this.currentDay + " " + item.eTime + ":00";
          item.semsterId = this.dataListLeft.semsterId;
          item.weekNumber = this.dataListLeft.weekNumber;
          item.inType = this.inType;
          arr.push(item);
        });

        // console.log("周计划1",arr)
        editEveryDayPlan(arr).then((res) => {
          if (res.code == "200") {
            this.msgSuccess("新增成功");
            this.open = false;
            this.getList(this.$route.query);
          }
        });
      } else {
        console.log("周计划2", this.formWeek);
        this.formWeek.startTime = this.formWeek.time[0];
        this.formWeek.endTime = this.formWeek.time[1];
        this.$refs["formWeek"].validate((valid) => {
          if (valid) {
            editWorklyPlan(this.formWeek).then((res) => {
              if (res.code == "200") {
                this.open = false;
                this.getList(this.$route.query);
              }
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.line {
  width: 3px;
  height: 10px;
  background: blue;

}

.boxzi {
  margin-left: 5px;
  color: blue;
}

.mb8 {
  display: flex;
  flex-wrap: wrap;

  p {
    margin: 0;
  }

  .el-col-6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-pack: center; */
    -ms-flex-pack: center;
    justify-content: center;
  }

  .oneday {
    width: 100%;
    background: #f3fff9;
    margin-top: 10px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: relative;
    padding: 10px 15px;

    .topinfor {
      margin-bottom: 15px;
      text-align: center;

      &>p {
        margin: 0;
      }

      .weekword {
        position: relative;
        z-index: 5;
        line-height: 31px;
        margin-bottom: 7px;

        .yuanback {
          width: 70px;
          height: 16px !important;
          background: #87cd9b;
          border-radius: 8px;
          display: block;
          position: absolute;
          left: 50%;
          margin-left: -35px;
          margin-top: -15px;
          z-index: -1;
        }

        .yuanback0,
        .yuanback5,
        .yuanback6 {
          background: #87cd9b;
        }

        .yuanback1 {
          background-color: #6a8ed6;
        }

        .yuanback2 {
          background-color: #f7e279;
        }

        .yuanback3 {
          background-color: #ff9e9e;
        }

        .yuanback4 {
          background-color: #81e2ea;
        }
      }
    }

    .bottominfor {
      line-height: 28px;
      display: flex;
      justify-content: space-between;

      .morning {
        flex: 1;
      }

      .afternoon {
        flex: 1;
        margin-left: 10px;
      }

      i {
        color: #ff9e9e;
        margin-right: 10px;
      }

      .footName {
        font-size: 12px;
        color: #9d7653;
        line-height: 20px;
      }

      .el-image {
        margin-right: 10px;
        height: auto !important;
        max-height: 40px;
      }
    }

    .editstyle {
      position: absolute;
      right: 11px;
      padding: 3px;
      border-radius: 0;
      background: #ff6f61;
      border: none;
      z-index: 6;
    }
  }

  .theday1 {
    background: #f3f7ff;
  }

  .theday2 {
    background: #fffdf3;
  }

  .theday3 {
    background: #fff3f3;
  }

  .theday4 {
    background: #f2feff;
  }
}

.addimg {
  margin-left: 10px;

  ::v-deep &>div {
    display: flex;
    flex-wrap: wrap;

    .el-upload-list__item {
      width: 68px;
      height: 68px;
      margin-bottom: 0;
    }

    .el-upload--picture-card {
      width: 68px;
      height: 68px;
      line-height: 68px;
      margin-bottom: 0;
    }
  }

  ::v-deep .el-upload__tip {
    display: none;
  }
}

.select-menu {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.select-menu:first-child {
  margin-right: 20px;
}

.dialog-footer {
  text-align: center;
}

.Breakfast {
  background-color: #eaf3ff;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 10px;

  img {
    width: 50px;
    height: 50px;
    margin: 15px 10px 15px 10px;
  }
}

::v-deep .el-select {
  width: 80%;

  .el-input {
    width: 100% !important;
  }
}

.el-form-item__content {
  width: 80%;

  .el-input {
    width: 80%;
  }
}

::v-deep .el-date-editor {
  width: 80%;
}
</style>
